<template>
  <!--经办人管理-->
  <section class="page agent-manage">
    <div class="row">
      <div
        class="col-span-2 org-tree"
        v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
      >
        <data-tree
          @select-change="onChange"
          :props="{ title: 'deptName' }"
          default-expand-all
          highlight-current
          :default-expanded-keys="expandDefault"
          node-key="id"
          ref="orgTree"
          :data="departmentData"
        ></data-tree>
      </div>
      <div :class="treeClose ? 'col-span-12' : 'col-span-10'">
        <data-form
          :model="userModel"
          @onSearch="queueIdChange(complainModule)"
          :page="pageService"
        >
          <template slot="inputs">
            <el-row>
              <!-- 非外包队列 -->
              <el-col :span="7">
                <el-form-item label="经办人" prop="realName" class="input-style" v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'">
                  <el-input v-model.trim="userModel.realName" clearable :maxlength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="经办代号" prop="handCode" class="input-style" v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'">
                  <el-input v-model.trim="userModel.handCode" :maxlength="20" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否管理员" prop="isAdmin" class="input-style" v-if=" complainModule === 'SELF' || complainModule === 'LAWSUIT'">
                  <el-select v-model="userModel.isAdmin" placeholder="请选择" clearable>
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- 外包公司 -->
              <el-col :span="8">
                <el-form-item label="外包编号" prop="companyNo" class="input-style" v-if="complainModule === 'OUTER'">
                  <el-input  v-model.trim="userModel.companyNo" :maxlength="20" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="外包公司" prop="companyName" class="input-style" v-if="complainModule === 'OUTER'">
                  <el-input v-model.trim="userModel.companyName" :maxlength="20" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </data-form>

        <!-- selectAgent -->
        <!-- <data-box-page-pick
          :data="userDataSet"
          @update:selectionList="selectList"
          :selectionList.sync="selectionList"
          @onPageChange="queueIdChange(complainModule)"
          :page="pageService"
          ref="data-box"
        > -->
        <data-box-page-pick
          :data="userDataSet"
          @update:selectionList="selectList"
          :selectionList.sync="selectionList"
          @onPageChange="queueIdChange(complainModule)"
          :page="pageService"
          ref="data-box"
        >
          <template slot="columns">
            <!-- <el-table-column
              type="selection"
              v-if="selectionList"
              :selectable="selectable"
              width="50"
            ></el-table-column> -->
            <el-table-column
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column
              label="序号"
              type="index"
              width="60"
            ></el-table-column>
            <!-- 非外包公司 -->
            <el-table-column
              prop="handCode"
              label="经办代号"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
            >
            </el-table-column>
            <el-table-column
              prop="userName"
              label="姓名"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
            >
            </el-table-column>
            <el-table-column
              prop="deptName"
              label="所属机构"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
            >
            </el-table-column>
            <el-table-column
              prop="caseSwitch"
              label="分案开关"
              :formatter="
                (row) => $filter.dictConvert(row.caseSwitch, 'SwitchState')
              "
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
            >
            </el-table-column>
            <el-table-column
              prop="isAdmin"
              label="是否管理员"
              :min-width="$helper.getColumnWidth(4)"
              :formatter="(row) => $filter.dictConvert(row.isAdmin, 'isAdmin')"
              show-overflow-tooltip
              v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
            >
              <template slot-scope="scope">
                {{ scope.row.divisionStatus === "1" ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'SELF' || complainModule === 'LAWSUIT'"
            >
              <template slot-scope="scope">
                {{ scope.row.state === "1" ? "停用" : "启用" }}
              </template>
            </el-table-column>
            <!-- 外包经办设置 -->
            <el-table-column
              prop="companyNo"
              label="外包编号"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'OUTER'"
            >
            </el-table-column>
            <el-table-column
              prop="companyName"
              label="外包公司"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'OUTER'"
            >
            </el-table-column>
            <el-table-column
              prop="deptStatus"
              label="分案状态"
              :min-width="$helper.getColumnWidth(4)"
              show-overflow-tooltip
              v-if="complainModule === 'OUTER'"
            >
              <template slot-scope="scope">
                {{ scope.row.deptStatus === 1 ? "无效" : "有效" }}
              </template>
            </el-table-column>
          </template>
        </data-box-page-pick>
      </div>
    </div>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { Action, State, Mutation, Getter, namespace } from "vuex-class";
import DataBoxPagePick from "~/components/common/data-box-page-pick-queueList.vue";
import DepartmentTree from "~/components/system-manage/department-tree.vue";
import DataTree from "~/components/common/data-tree.vue";
import { QueueService } from "~/services/domain-service/queue-manage.service";
import { set } from "vue/types/umd";
// import { UserService } from "~/services/management-service/user.service";
// import { TelCaseManageService } from "~/services/domain-service/telephone-collection-controller.service";
import { CustomerComplainService } from "../../services/domain-service/customer-complain.service";

@Layout("workspace")
@Component({
  components: {
    DepartmentTree,
    DataTree,
    DataBoxPagePick,
  },
})
export default class AddAgent extends Vue {
  @Prop({ default: false }) private isTeamUse;
  @Prop() private treeClose;
  @Prop() private queueId;
  @Prop() private queueType;
  //   @Dependencies(TelCaseManageService) private TelCaseManageService: TelCaseManageService;
  //   @Dependencies(UserService) private userService: UserService;
  @Dependencies(CustomerComplainService) private customerComplainService: CustomerComplainService;
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(QueueService) private queueService: QueueService;
  // @Prop() private departmentData;
  @Getter
  private departmentData;
  @Prop() private expandDefault;
  @Prop() private complainModuleId;
  @Prop() private companyNodata;
  //编辑时传入的队列原始经办人列表
  private importData: any[] = [];
  private userDataSet = [];
  private userModel: any = {
    userName: "",
    realName: "",
    deptCode: "",
    isAdmin: "",
    handCode: "",
    // 外包
    companyName: "",
    id: "",
  };
  private companyCode: any = "";
  private selectionList: any[] = [];
  private selectAgent: any[] = [];
  private deptCode: any = "";
  // private dept: any = "";
  private selectListArr: any = [];
  private copy: any = [];
  private complainModule: any = "";

  @Emit("close") private close() { }

  @Watch("selectionList", { immediate: true })
  private onCaseNumberChange(newVal, oldVal) {}

  private next() {
    this.$emit("next", this.selectListArr); // 下一步按钮
  }

  private selectable(row) {
    if (this.queueType !== "OUTER") {
      return row.caseSwitch === "OPEN" ? true : false; // 自催
    } else {
      return row.divisionStatus === "0" ? true : false; // 外包
    }
  }

  private created() {
    // this.userModel.deptCode = this.expandDefault;
    // this.refreshData();
  }
  private refreshData() {
    this.copy = [...this.reorganizeData(), ...this.copy];
    if (this.complainModule === 'SELF' || this.complainModule === 'LAWSUIT') {
      this.NoOrgOut(); // 自催,法诉
    } else {
      this.OrgOut(); // 外包
    }
  }
  
  private queueIdChange(val,companyNodata) {
    this.selectionList = companyNodata
    this.complainModule = val;
    if(this.complainModule === 'SELF' || this.complainModule === 'LAWSUIT'){
        this.NoOrgOut(); // 自催,法诉
    } else {
        this.OrgOut();  // 外包 
    }
  }

  private NoOrgOut() {
    // this.deptCode = '2'
    if(!this.deptCode){return false}
    const params: any = { deptCode: this.deptCode, handCode: this.userModel.handCode, isAdmin: this.userModel.isAdmin };
    this.customerComplainService.getComplainUserNameList(params, this.pageService).subscribe(
      (data) => { 
        this.userDataSet = data 
      }
    );
  }

  private OrgOut() {
    const params: any = { companyName: this.userModel.companyName, companyNo: this.userModel.companyNo };
    this.customerComplainService.getComplainCompanyNameList(params, this.pageService).subscribe(
      (data) => {
        this.userDataSet = data
      }
    );
  }

  /**
   * 点击获取机构id
   */
  private onChange(value) {
    // this.userModel.handCode = value.deptCode;
    this.deptCode = value.deptCode;
    // this.dept = value;
    this.refreshData();
    this.queueIdChange(this.complainModule, this.companyNodata);
    this.copy = [...this.reorganizeData(), ...this.copy];
  }

  private reorganizeData() {
    if(!this.copy){return false}
    const arr = this.copy.map((v) => v.id);
    const result: any = [];
    if(this.selectionList) {
      this.selectionList.forEach((v) => {
        if (!arr.includes(v.id)) {
          result.push(v);
        }
      });
    }
    return result;
  }

  //重置经办人
  private reset() {
    const dataBox: any = this.$refs["data-box"];
    this.selectionList = [];
    this.userModel.realName = "";
    this.userModel.userName = "";
    this.userModel.handCode = "";
    this.pageService.pageIndex = 1;
    this.deptCode = "";
    // this.dept = "";
    // this.refreshData();
    dataBox.reset();
  }

  // // 回显经办人
  // private update(data) {
  //   console.log("data", data);
  //   this.reset();
  //   const dataBox: any = this.$refs["data-box"];
  //   dataBox.updateSelectionList(data);
  //   this.importData = data;
  //   this.selectAgent = data;
  //   this.copy = data;
  //   // 外包
  //   if (this.queueType === "OUTER") {
  //     data.map((item) => {
  //       item.id = item.agentId;
  //       item.companyName = item.realName;
  //       item.companyNo = item.handCode;
  //       item.divisionStatus = item.caseSwitch;
  //     });
  //   }
  // }

  private selectList(list) {
    this.selectListArr = list;
  }

  //提交经办人
  private commit() {
    // this.copy = [...this.reorganizeData(), ...this.copy];
    // this.copy = this.selectionList;
    // this.selectAgent = [...this.copy];
    if(this.complainModule === 'SELF' || this.complainModule === 'LAWSUIT'){
        this.NoOrgOutCommit(); // 自催,法诉
    } else {
        this.OrgOutCommit();  // 外包
    }
  }

  private NoOrgOutCommit() {
    this.$emit("selectListArr", this.selectListArr)
    this.close()
  }
  private OrgOutCommit() {
    this.$emit("selectListArr", this.selectListArr)
    this.close()
  }
}
</script>

<style lang="less" scoped>
.page.agent-manage {
  .col-span-2 {
    padding: 0;
  }
  .add-org {
    padding: 10px 20px;
    text-align: right;
    border-bottom: solid 1px #e4e4e4;
  }
  .org-tree {
    border: solid 1px #e4e4e4;
    min-height: 600px;
  }
  .col-span-10 {
    border: 1px solid #e4e4e4;
    border-left: none;
  }
  .col-span-12 {
    border: 1px solid #e4e4e4;
  }
  .title {
    padding-left: 10px;
    font-size: 16px;
  }
}
</style>
<style lang="less">
.team-note {
  .el-form-item__content {
    display: flex;
  }
}
.lockEndDate {
  margin-left: 64px;
}
.isTeamUse {
  .el-form-item__label {
    font-size: 14px !important;
    margin-left: -10px;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
.queueRemark {
  margin-top: 20px;
}
.input-style {
  display: flex !important;
  .el-form-item__label {
    width: 106px !important;
  }
  .el-input {
    width: 100% !important;
  }
}
</style>
